<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Form 表单2</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style type="text/css">
.input-bl{
	display: inline-block;
	width: 406px;
}
.input-bl>.el-input__wrapper{
	width: 376px;
}
</style>
</head>
<body>
<div id="app" class="">
	<a href='Form1.html' class='layui-btn0'>典型表单，行内表单，对齐方式，表单校验</a>
	<a href='Form2.html' class='layui-btn'>自定义校验规则，添加/删除表单项，数字类型验证，尺寸控制，可访问性</a>
	
	<el-divider content-position="left">自定义校验规则</el-divider><!-- =============================================================== -->
	<p class="desc">这个例子中展示了如何使用自定义验证规则来完成密码的二次验证</p>
	<p class="desc">本例还使用status-icon属性为输入框添加了表示校验结果的反馈图标</p>
	<el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm w600">
		<el-form-item label="Pass" prop="pass">
			<el-input v-model="ruleForm.pass" type="password" autocomplete="off"></el-input>
		</el-form-item>
		<el-form-item label="CheckPass" prop="checkPass">
			<el-input v-model="ruleForm.checkPass" type="password" autocomplete="off"></el-input>
		</el-form-item>
		<el-form-item label="Age" prop="age">
			<el-input v-model.number="ruleForm.age"></el-input>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
			<el-button @click="resetForm('ruleForm')">重置</el-button>
		</el-form-item>
	</el-form>
	
	<el-divider content-position="left">添加/删除表单项</el-divider><!-- =============================================================== -->
	<p class="desc">除了一次通过表单组件上的所有验证规则外. 您也可以动态地通过验证规则或删除单个表单字段的规则</p>
	<el-form ref="formRef" :model="dynamicValidateForm" label-width="120px" class="w600">
		<el-form-item prop="email" label="Email" :rules="rulesEmail">
			<el-input v-model="dynamicValidateForm.email" /></el-input>
		</el-form-item>
		<el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :key="domain.key" :label="'Domain' + domain.key" :prop="'domains.' + index + '.value'" :rules="rulesDomain">
			<el-input v-model="domain.value" class="input-bl"/></el-input>
			<el-button @click.prevent="removeDomain(domain)" style="float:right;">删除</el-button>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="submitForm('formRef')">提交</el-button>
			<el-button @click="addDomain">增加输入框</el-button>
			<el-button @click="resetForm('formRef')">重置</el-button>
		</el-form-item>
	</el-form>
	
	<el-divider content-position="left">数字类型验证</el-divider><!-- =============================================================== -->
	<p class="desc">数字类型的验证需要在 v-model 处加上 .number 的修饰符，这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符。</p>
	<el-form ref="formRefNumber" :model="numberValidateForm" label-width="100px" class="w600">
		<el-form-item label="age" prop="age" :rules="[
			{ required: true,		message: 'age是必填的' },
			{ type: 'number',		message: 'age必须是一个数字' },
			{validator: this.validateAge,		trigger: 'blur'},
		]">
			<el-input v-model.number="numberValidateForm.age" type="text" autocomplete="off" />
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="submitForm('formRefNumber')">Submit</el-button>
			<el-button @click="resetForm('formRefNumber')">Reset</el-button>
		</el-form-item>
	</el-form>
	
	<el-divider content-position="left">尺寸控制</el-divider><!-- =============================================================== -->
	<p class="desc">表单中的所有子组件都继承了该表单的 size 属性。 同样，form-item 也有一个 size 属性。</p>
	<p class="desc">如果希望某个表单项或某个表单组件的尺寸不同于 Form 上的 size 属性，直接为这个表单项或表单组件设置自己的 size 属性即可。</p>
	<p class="desc">label-width可以控制左侧label的宽度。</p>
	<div>
		<el-radio-group v-model="size" label="size control">
			<el-radio-button label="large">large</el-radio-button>
			<el-radio-button label="default">default</el-radio-button>
			<el-radio-button label="small">small</el-radio-button>
		</el-radio-group>
		<el-radio-group v-model="labelPosition" label="position control" style="margin-left: 8px;">
			<el-radio-button label="left">Left</el-radio-button>
			<el-radio-button label="right">Right</el-radio-button>
			<el-radio-button label="top">Top</el-radio-button>
		</el-radio-group>
		<el-radio-group style="margin-left: 8px;">
			<el-radio-button @click="seeSize">查看size和labelPosition</el-radio-button>
		</el-radio-group>
	</div>
	<br />
	<el-form ref="formSize" :model="sizeForm" label-width="220px" :label-position="labelPosition" :size="size" class="w600">
		<el-form-item label="活动名称" prop="name" >
			<el-input v-model="sizeForm.name" autocomplete="on"/></el-input>
		</el-form-item>
		<el-form-item label="活动区" prop="region">
			<el-select v-model="sizeForm.region" placeholder="请选择您的区域">
				<el-option label="上海" value="shanghai"></el-option>
				<el-option label="北京" value="beijing"></el-option>
			</el-select>
		</el-form-item>
		
		<el-form-item label="活动时间" required>
			<el-col :span="11">
				<el-form-item prop="date1">
					<el-date-picker v-model="sizeForm.date1" type="date" placeholder="Pick a date" style="width: 100%" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :span="2" style="text-align: center;">
				<span class="text-gray-500">-</span>
			</el-col>
			<el-col :span="11">
				<el-form-item prop="date2">
					<el-time-picker v-model="sizeForm.date2" placeholder="Pick a time" style="width: 100%" format="HH:mm:ss" value-format="HH:mm:ss"></el-time-picker>
				</el-form-item>
			</el-col>
		</el-form-item>
		<el-form-item label="活动类型" prop="type">
			<el-checkbox-group v-model="sizeForm.type">
				<el-checkbox-button label="在线活动" name="type" /></el-checkbox-button>
				<el-checkbox-button label="推广活动" name="type" /></el-checkbox-button>
			</el-checkbox-group>
		</el-form-item>
		<el-form-item label="相关资源" prop="resource">
			<el-radio-group v-model="sizeForm.resource">
				<el-radio border label="赞助" /></el-radio>
				<el-radio border label="会场" /></el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="submitForm('formSize')">Create</el-button>
			<el-button @click="resetForm('formSize')">Reset</el-button>
		</el-form-item>
	</el-form>
	
	<el-divider content-position="left">可访问性</el-divider><!-- =============================================================== -->
	<p class="desc">当在 el-form-item内只有一个输入框(或相关的控制，如选择或复选框)， 将自动使用表单标签(form-item-label)。 然而，如果同时有多个输入框在 el-form-item内， 表单项将被分配为 WAI-ARIA 组 的角色。 在这种情况下，需要手动给每个 input 指定访问标签。</p>
	<el-form ref="formFull" :model="formAccessibility" label-position="left" label-width="150px" style="max-width: 460px">
		<el-space fill>
			<el-alert type="info" show-icon :closable="false">
				<p>输入时会自动贴上“Full Name”标签:</p>
			</el-alert>
			<el-form-item label="Full Name" prop="fullName">
				<el-input v-model="formAccessibility.fullName" /></el-input>
			</el-form-item>
		</el-space>
		<el-space fill>
			<el-alert type="info" show-icon :closable="false">
				<p>“您的信息”作为输入组的标签。<br/>您必须在各个输入上指定标签。占位符不替换使用"label"属性。</p>
			</el-alert>
			<el-form-item label="Your Information" prop="flName">
				<el-row :gutter="20">
					<el-col :span="12">
						<el-input v-model="formAccessibility.firstName" label="First Name" placeholder="First Name"/></el-input>
					</el-col>
					<el-col :span="12">
						<el-input v-model="formAccessibility.lastName" label="Last Name" placeholder="Last Name"/></el-input>
					</el-col>
				</el-row>
			</el-form-item>
		</el-space>
		<el-form-item>
			<el-button type="primary" @click="submitForm('formFull')">提交</el-button>
			<el-button @click="resetForm('formFull')">重置</el-button>
		</el-form-item>
	</el-form>
	
</div>
</body>
<script>
const Main = {
	data() {
		return {
			size: 'default',
			labelPosition :'right',
			sizeForm: {
				name: '',
				region: '',
				date1: '',
				date2: '',
				delivery: false,
				type: [],
				resource: ''
			},
			numberValidateForm: {
				age: '',
			},
			ruleForm: {
				pass: '',
				checkPass: '',
				age: '',
			},
			rules: {
				pass: [
					{validator: this.validatePass,			trigger: 'blur'},
				],
				checkPass: [
					{validator: this.validateCheckPass,		trigger: 'blur'},
				],
				age: [
					{validator: this.validateAge,			trigger: 'blur'},
					// 如果createApp(Main)中Main的数据是组装的，则参考以下方式自定义校验规则
					// 参考：/oa/app201/chain/view/sale/input.html
					// {validator: ValidateObj.allowNull_mustMoney,					trigger: 'blur',},
					
					// 另外： /oa/app201/hr/view/index/setpwd.html 演示了直接在当前文件组建validator的用法
				],
			},
			rulesEmail: [
				{required: true,		message: '请输入邮箱地址',		trigger: 'blur',},
				{type: 'email',			message: '请输入正确的电邮地址',	trigger: ['blur', 'change'],},
			],
			rulesDomain: {required: true,		message: '不能为空',		trigger: 'blur',},
			
			dynamicValidateForm: {
				domains: [
					{key: 1,value: '1',},
					{key: 2,value: '11',},
				],
				email: '123@qq.com'
			},
			
			formAccessibility: {
				fullName: '',
				firstName: '',
				lastName: '',
			},
		}
	},
	methods:{
		seeSize(){
			console.log(this.size, this.labelPosition);
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					console.log('submit success!');
					if(formName == "ruleForm"){
						console.log(this.ruleForm);
					}else if(formName == "formRef"){
						console.log(this.dynamicValidateForm);
					}else if(formName == "formRefNumber"){
						console.log(this.numberValidateForm);
					}else if(formName == "formSize"){
						console.log(this.sizeForm);
					}else if(formName == "formFull"){
						console.log(this.formAccessibility);
					}
				} else {
					console.log('error submit!!')
					return false
				}
			})
		},
		resetForm(formName) {
			console.log("resetForm");
			this.$refs[formName].resetFields()
		},
		
		validatePass(rule, value, callback){
			if (value === '') {
				callback(new Error('请输入密码！9'))
			} else {
				if (this.ruleForm.checkPass !== '') {
					this.$refs.ruleForm.validateField('checkPass99')
				}
				callback()
			}
		},
		validateCheckPass(rule, value, callback){
			if (value === '') {
				callback(new Error('请重新输入密码！'))
			} else if (value !== this.ruleForm.pass) {
				callback(new Error("两次输入不匹配！"))
			} else {
				callback()
			}
		},
		validateAge(rule, value, callback){
			if (!value) {
				return callback(new Error('请输入年龄'))
			}
			setTimeout(() => {
				if (!Number.isInteger(value)) {
					callback(new Error('请输入数字'))
				} else {
					if (value < 18) {
						callback(new Error('年龄必须大于等于18岁'))
					} else if(value >= 126){
						callback(new Error('超过126岁的就不要来了'))
					}else{
						callback()
					}
				}
			}, 300)
		},
		
		removeDomain(domain){
			// console.log("del", domain);
			const index = this.dynamicValidateForm.domains.indexOf(domain)
			if (index !== -1) {
				this.dynamicValidateForm.domains.splice(index, 1)
			}
		},
		addDomain(){
			this.dynamicValidateForm.domains.push({
				key: this.dynamicValidateForm.domains.length + 1,
				value: '',
			})
		}
	}
}
const app = Vue.createApp(Main);
app.use(ElementPlus);
let vm = app.mount("#app");

</script>
</html>
